<style>
a.new_budget{
	width:196px;
}

div#new, div#copy, div#vertical_break{
	float:left;
}

div#vertical_break{
  width: 10px;
  background-color: #dddddd;
  margin-left: 1em;
  margin-right: 1em;
}

input{
	width: 100%;
}
</style>

<script>

$(document).ready(function(){
	function NewBudgetViewModel(){
		var self = this;
		this.budgets = ko.observableArray([]);
		
		$.getJSON('/action/get_budgets', function(docs){
			console.log('Docs'+docs);
		});
	}
	var view_model = new NewBudgetViewModel();
});

function CopyBudget(){
	alert('Not implemented\nSend money');
}

function CreateNewBudget(){
	if(!ValidInput()){
		$('#new_name').css("background", "#E52B50");
		$('#input_error').html('Please name your new budget');
		return;
	}
	
	var name = $('#new_name').val();
	
	$.post('/action/new_budget', { name: name}, function(response){
		var id = response.id;
		console.log('New Budget ID: '+id);
		console.log(response.doc);
		window.location.replace('/view/edit_incomes?id='+id);
	}, 'json');
}
function ValidInput(){
	return $('#new_name').val().length != 0;
}
</script>

<h2>New Budget</h2>
<p>Here you can create a new blank budget or copy one you have created previously to use as a template</p>
<div id='new'>
	<input id='new_name' type="text" class="m-wrap disabled" placeholder="Enter a budget name"  style='height: 32px; width: 100%;'/>
	<br>
	<br>
	<a href='#' onclick='CreateNewBudget()' class='m-btn green-stripe new_budget'>New</a>
	<br>
	<br>
	<div id='input_error'></div>
</div>
<div id='vertical_break' style='height: 120px;'>
</div>
<div id='copy'>
	<select id='select_budget' class="m-wrap" style='width: 100%;' data-bind='options: budgets, hide: budgets.length===0;'>
	</select>
	<br>
	<br>
	<a href='#' onclick='CopyBudget()' class='m-btn blue-stripe new_budget' data-bind='disabled: budgets.length==0'>Copy</a>
</div>